<template>
  <div class="result-list-container">
    <el-tag
      class="category-tag"
      closable
      effect="plain"
      v-for="tag in tagList"
      :key="tag.uuid"
      :disable-transitions="false"
      @close="() => handleRemoveTag(tag)"
    >
      <span class="tag-text">{{tag.name}} {{tag.uuid}}</span>
    </el-tag>
  </div>
</template>
<script>
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    tagList () {
      return [...this.dataSource]
    },
  },
  methods: {
    // 移除标签
    handleRemoveTag (tag) {
      const updateList = this.dataSource.filter(item => item.uuid !== tag.uuid)
      this.$emit('remove', tag)
      this.$emit('update', updateList)
    },
  }
}
</script>
<style lang="less" scoped>
.category-tag {
  margin: 5px 0;
  .tag-text {
    display: inline-block;
    width: 440px;
  }
}
.result-list-container {
  max-height: 400px;
  overflow: hidden;
  overflow-y: auto;
}
</style>
